<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="80%"
      append-to-body
      :before-close="close"
    >
      <el-row :gutter="10">
        <el-col :md="8" :sm="24">
          <div class="params-info">
            <div class="title">
              <label>合同参数信息</label>
              <div class="prompt">
                参教复制至模板上，即可根据线上签约时所填写的信息自动生成合同信息并补充
              </div>
            </div>
            <div class="search">
              <el-input
                placeholder="请输入"
                v-model="search"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <el-table
              :data="
                textTable.filter(
                  (data) =>
                    !search ||
                    data.title.toLowerCase().includes(search.toLowerCase()) ||
                    data.explain.includes(search)
                )
              "
              ref="table"
            >
              <el-table-column label="占位符" align="center" prop="title">
                <template slot-scope="scope">
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                    "
                  >
                    <span>{{ scope.row.title }}</span>
                    <i
                      class="el-icon-document-copy"
                      v-clipboard:copy="scope.row.title"
                      v-clipboard:success="clipboardSuccess"
                      style="cursor: pointer; color: #3889f8"
                    ></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="说明" align="center" prop="explain" />
              <el-table-column label="举例" align="center" prop="ensample" />
            </el-table>
          </div>
        </el-col>
        <el-col :md="16" :sm="24">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="模板名称" prop="templateName">
              <el-input
                v-model="form.templateName"
                placeholder="请输入模板名称"
                readonly
              />
            </el-form-item>
            <el-form-item label="适应租期类型" prop="apartmentType">
              <el-radio-group v-model="form.apartmentType" disabled>
                <el-radio
                  v-for="dict in dict.type.dict_unsubscribe_rule_type"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="模板内容">
              <!-- <editor v-model="form.content" :min-height="192" /> -->
              <div v-html="form.content"></div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">关 闭</el-button>
        <!-- <el-button type="primary" @click="submitForm">保 存</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addContractTemplate,
  updateContractTemplate,
} from "@/api/contract/template";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      default: "新建合同模板",
    },
    formData:{},
    success:{
        type:Function,
        default:()=>{}
    }
  },
  dicts: ["dict_unsubscribe_rule_type"],
  data() {
    return {
      visible: false,
      search: "",
      textTable: [
        {
          title: "${partyAName}",
          explain: "出租方(甲方)",
          ensample: "伊犁哈萨克自治州伊宁市物业公司",
        },
        {
          title: "${partyAContact}",
          explain: "甲方联系方式",
          ensample: "176****2318",
        },
        {
          title: "${partyBName}",
          explain: "承租方（乙方）",
          ensample: "张三",
        },
        {
          title: "${partyBContact}",
          explain: "乙方联系方式",
          ensample: "乙方联系方式	176****0919",
        },
        {
          title: "${partyBIdNumber}",
          explain: "乙方身份证",
          ensample: "5402011****9391",
        },
        {
          title: "${timeRange}",
          explain: "租赁期限",
          ensample: "2023-04-24 ~ 2024-04-24",
        },
        {
          title: "${rentStandard}",
          explain: "租金标准",
          ensample: "",
        },
        {
          title: "${deposit}",
          explain: "押金",
          ensample: "¥1000",
        },
        {
          title: "${address}",
          explain: "地址",
          ensample: "xx省xx市xx区xx街道xx小区xx栋xx单元xx号",
        },
        {
          title: "${houseType}",
          explain: "户型",
          ensample: "两房一厅一卫",
        },
        {
          title: "${area}",
          explain: "面积",
          ensample: "80",
        },
        {
          title: "${day}",
          explain: "合同签订日期",
          ensample: "2023-4-24",
        },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        templateName: [
          { required: true, message: "模板名称不能为空", trigger: "blur" },
        ],
        apartmentType: [
          { required: true, message: "租期类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    value(newVal, oldVal) {
      this.visible = newVal; // 监测value的变化，并赋值。
      if(newVal){
        this.form = this.formData
      }
    },
    visible(val) {
      this.$emit("input", val); // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  mounted() {
    this.visible = this.value;
  },
  methods: {
    //重置表单
    reset() {
      this.form = {
        templateName: "", //合同模板名称
        content: "", //合同模板内容
        apartmentType: undefined, //公寓类型(出租周期)：1短租公寓;2长租公寓
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    // submitForm: function () {
    //   this.$refs["form"].validate((valid) => {
    //     if (valid) {
    //       if (this.form.templateId != undefined) {
    //         updateContractTemplate(this.form).then((response) => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.$emit('success')
    //         });
    //       } else {
    //         console.log("add");
    //         addContractTemplate(this.form).then((response) => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.$emit('success')
    //         });
    //       }
    //       this.close()
    //     }
    //   });
    // },
    // 取消按钮
    cancel() {
      this.reset();
      this.visible = false;
    },
    close() {
      this.reset();
      this.visible = false;
    },
    /** 复制代码成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
.params-info {
  max-height: 70vh;
  overflow-y: auto;
  .title {
    margin-bottom: 20px;
    label {
      font-size: 16px;
    }
    .prompt {
      padding: 5px 0;
      color: #fcc17f;
    }
  }
  .search {
    margin-bottom: 10px;
  }
}
</style>